<template>
  <div>
    <div class="warp">
      <div
 
      
        class="el-upload--picture-card thumb_warp"
        v-for="(file, index) in uploadImgList"
        :key="index"
      >
        <el-image
             @mouseenter.native="hover(index)"
          class="thumbnail"
          :src="file.ossFilePath"
          alt=""
        ></el-image>
        <span class="item-actions"   @mouseleave="outOVer(index)" v-if="file.disabled">
          <span
            
            @click="handlePictureCardPreview(file)"
          >
            <i class="icon el-icon-zoom-in"></i>
          </span>

          <span
          
            @click="handleRemove(file)"
          >
            <i class="icon el-icon-close"></i>
          </span>
        </span>
      </div>
      <el-upload
        class="upload"
        :show-file-list="false"
        :http-request="uploadImage"
        action="action"
        list-type="picture-card"
      >
        <i slot="default" class="el-icon-plus"></i>
      </el-upload>
    </div>
    <el-dialog custom-class="costomDlg" :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { uploadFile } from "/@/api/uploadApi";
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      uploadImgList: [],
    };
  },
  methods: {
    handleRemove(file) {
      const index = this.uploadImgList.findIndex(
        (item) => item.fileName === file.name
      );
      this.uploadImgList.splice(index, 1);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.ossFilePath;
      this.dialogVisible = true;
    },
    handleDownload() {
  
    },
    hover(index){
        let newFile =  this.uploadImgList[index];
        newFile.disabled = true;
        this.$set(this.uploadImgList,index,newFile)
        
    },
    outOVer(index){
         let newFile =  this.uploadImgList[index];
        newFile.disabled = false;
        this.$set(this.uploadImgList,index,newFile)
    },
    uploadImage(params) {
      const file = params.file;
      // 根据后台需求数据格式
      const form = new FormData();
      // 文件对象

      form.append("file", file);
      form.append("fileName", file.name);

      uploadFile(form)
        .then((res) => {
          this.uploadImgList.push(res);
         
        })
        .catch(() => {
          // xxx
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.warp{
    display: flex;
    justify-content: flex-start;
}
.thumb_warp{
    position: relative;
    margin-right: 10px;
}
.thumbnail{
  position: relative;
    width: 50px;
    height: 50px;
}
.item-actions{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display:flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.1);
}
.icon{
    color: #ffffff
}
.el-icon-close{
  position:absolute;
  top: 0;
  right: 0;
}
</style>